<template>
  <div>
    <el-card style="margin:20px 0">
      <menus @getcatagory="getcatagoryList" :show="!ishowTable"></menus>
    </el-card>
    <el-card>
      <div v-show="secne == 0">
        <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="addsku">添加SPU</el-button>
        <!-- 表格展示 -->
        <el-table style="width: 100%" border :data="records">
          <el-table-column label="序号" width="180" type="index">
          </el-table-column>
          <el-table-column label="SPU名称" width="180" prop="spuName">
          </el-table-column>
          <el-table-column label="SPU描述" width="width" prop="description">
          </el-table-column>
          <el-table-column label="操作" width="width">
            <template slot-scope="{row,$index}">
              <!-- <HitButton></HitButton> -->
              <hit-button icon="el-icon-plus" type="success" size="mini" title="添加spu"></hit-button>
              <hit-button icon="el-icon-edit" type="warning" size="mini" title="修改spu"
                @click="update(row)"></hit-button>
              <hit-button icon="el-icon-info" type="info" size="mini" title="查看spu"></hit-button>
              <hit-button icon="el-icon-delete" type="danger" size="mini" title="删除spu"></hit-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination style="text-align:center" :current-page="page" :page-sizes="[3, 5, 10]" :page-size=limit
          @current-change="handleCurrentChange" @size-change="sizeChange"
          layout="prev, pager, next, jumper,->,sizes,total" :total="total">
        </el-pagination>
      </div>
      <SpuForm v-show="secne == 1" @changesecen="changese" ref="spu"></SpuForm>
      <!-- <SkuForm v-show="secne == 2"></SkuForm> -->
    </el-card>
  </div>

</template>

<script>
import SpuForm from '@/views/product/spu/spuForm/index.vue'
import SkuForm from '@/views/product/spu/skuForm/index.vue'


export default {
  name: "spu",
  components: {
    SpuForm,
    SkuForm,
  },

  data() {
    return {
      category1Id: '',
      category2Id: '',
      category3Id: '',
      ishowTable: true,
      page: 1,
      limit: 3,
      total: 0,
      records: [],
      secne: 0

    }
  },
  methods: {
    getcatagoryList({ categoryId, level }) { //解构

      if (level == 1) {
        this.category1Id = categoryId;
        // this.category2Id = '';
        // this.category3Id = '';
      } else if (level == 2) {
        this.category2Id = categoryId;
        this.category3Id = '';
      } else {
        //代表三级分类的id有了
        this.category3Id = categoryId;

        //发请求获取平台的属性数据
        // console.log(this.category1Id, this.category2Id, this.category3Id);

        this.getSpuList();

      }
    },
    async getSpuList() {
      //获取分类的ID
      const { page, limit, category3Id } = this;
      console.log(this.$API.spu);

      // 获取属性列表的数据
      let result = await this.$API.spu.reqSpuList(
        page,
        limit,
        category3Id
      );

      if (result.code == 200) {
        this.total = result.data.total
        this.records = result.data.records;
        // console.log(this.records);

      }
    },
    async handleCurrentChange(page) {
      this.page = page
      this.getSpuList()
    },
    async sizeChange(limit) {
      this.limit = limit
      this.getSpuList()
    },
    addsku() {
      this.secne = 1;
    },
    update(row) {
      this.secne = 1
      this.$refs.spu.getInitData(row)

    },
    changese(item) {
      this.secne = item
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>